import React from 'react';
import { Table, Switch, Button, Modal, Form, Input, Select, InputNumber, message, Space } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import { ExtendedInfo, ExtendedInfoFormValues } from '../../types/device';

interface ExtendedInfoPanelProps {
  extendedInfo: ExtendedInfo[];
  onToggleExtInfo: (key: string, checked: boolean) => void;
  onDeleteExtInfo: (key: string) => void;
  onEditExtInfo: (info: ExtendedInfo) => void;
  addExtInfoVisible: boolean;
  setAddExtInfoVisible: (visible: boolean) => void;
  extForm: any;
  onAddExtInfo: (info: ExtendedInfo) => void;
}

const ExtendedInfoPanel: React.FC<ExtendedInfoPanelProps> = ({
  extendedInfo,
  onToggleExtInfo,
  onDeleteExtInfo,
  onEditExtInfo,
  addExtInfoVisible,
  setAddExtInfoVisible,
  extForm,
  onAddExtInfo
}) => {
  // 类型选项
  const typeOptions = [
    { label: '数值', value: '数值' },
    { label: '字符串', value: '字符串' },
    { label: '布尔值', value: '布尔值' },
  ];

  const handleAddExtInfoSubmit = async () => {
    try {
      const values = await extForm.validateFields();
      const newInfo: ExtendedInfo = {
        key: `ext-${Date.now()}`,
        index: extendedInfo.length + 1,
        name: values.name,
        type: values.type,
        enabled: true,
      };
      onAddExtInfo(newInfo);
      message.success('扩展信息已添加');
      setAddExtInfoVisible(false);
      extForm.resetFields();
    } catch (error) {
      message.error('表单验证失败，请检查必填项');
    }
  };

  const handleCancelAddExtInfo = () => {
    extForm.resetFields();
    setAddExtInfoVisible(false);
  };

  return (
    <>
      

      {/* 添加扩展信息模态框 */}
      <Modal
        title="添加扩展信息"
        open={addExtInfoVisible}
        onOk={handleAddExtInfoSubmit}
        onCancel={handleCancelAddExtInfo}
        footer={[
          <Button key="cancel" onClick={handleCancelAddExtInfo}>
            取消
          </Button>,
          <Button key="submit" type="primary" onClick={handleAddExtInfoSubmit}>
            确定
          </Button>
        ]}
      >
        <Form
          form={extForm}
          layout="vertical"
          name="extended_info_form"
        >
          <Form.Item
            name="name"
            label="名称"
            rules={[{ required: true, message: '请输入扩展信息名称' }]}
          >
            <Input placeholder="请输入扩展信息名称" />
          </Form.Item>

          <Form.Item
            name="type"
            label="类型"
            rules={[{ required: true, message: '请选择类型' }]}
          >
            <Select options={typeOptions} placeholder="请选择类型" />
          </Form.Item>

          <Form.Item name="defaultValue" label="默认值">
            <Input placeholder="请输入默认值" />
          </Form.Item>

          <Form.Item name="unit" label="单位">
            <Input placeholder="请输入单位" />
          </Form.Item>

          <div style={{ display: 'flex', gap: '16px', marginBottom: '16px' }}>
            <Form.Item name="max" label="最大值" style={{ flex: 1 }}>
              <InputNumber placeholder="最大值" style={{ width: '100%' }} />
            </Form.Item>
            <Form.Item name="min" label="最小值" style={{ flex: 1 }}>
              <InputNumber placeholder="最小值" style={{ width: '100%' }} />
            </Form.Item>
          </div>

          <Form.Item name="description" label="描述">
            <Input.TextArea rows={3} placeholder="请输入描述信息" />
          </Form.Item>
        </Form>
      </Modal>
    </>
  );
};

export default ExtendedInfoPanel;